<template>
    <div class="page notTab">
        <Header> 收货地址 </Header>
        <div class="info">
            <div class="address">
                <template v-if="addrList.length == 0 && loaded">
                    <div class="fx jcc">
                        <Nimg src="034.png" width="686" height="578" />
                    </div>
                </template>
                <template v-else>
                    <div
                        class="addr fx aife"
                        v-for="(i, index) in addrList"
                        :key="index"
                        @longtap="onDelete(i.Id)"
                        @click="startCheck(i.Id)"
                    >
                        <div class="txt fx1 fx">
                            <div>
                                <div class="tt fx">
                                    <div class="name">{{ i.name }}</div>
                                    <div class="tel">{{ i.tel }}</div>
                                    <div
                                        class="morendizhi"
                                        v-if="Number(i.def)"
                                    >
                                        已选择
                                    </div>
                                </div>
                                <div class="bb">
                                    {{ i.addr_code }}&nbsp;&nbsp;{{ i.addr }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="edit"
                            @click.stop="$go('addAddress?id=' + i.Id)"
                        >
                            修改
                        </div>
                        <div class="del" @click.stop="onDelete(i.Id)">删除</div>
                    </div>
                </template>

                <div class="addWrapHeight"></div>
                <div class="addWrap boxShadow">
                    <button class="fx jcc" @click="$go('addAddress')">
                        <div class="icon">
                            <Nimg src="035.png" width="27" height="28" />
                        </div>
                        <div class="wb">新建收货地址</div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "@/common";
export default {
    data() {
        return {
            addrList: [],
            current: "",
            loaded: false,
        };
    },
    onLoad() {
        this.init();
    },
    onUnload() {
        $.isRefresh = true;
    },
    onShow() {
        if ($.isRefresh) {
            $.isRefresh = false;
            this.init();
        }
    },
    components: {},
    methods: {
        go: $.go,
        onDelete(id) {
            $.log("长按");
            $.showModal("是否删除？", () => {
                let url = $.user("removeReveiveAddr");
                let data = {
                    Id: id,
                };
                $.np(url, data).then((res) => {
                    $.suc("已删除");
                    this.init();
                });
            });
        },
        startCheck(id) {
            this.current = id;
            $.log(this.current);
            $.setLocal("currentAddrId", id);

            let url = $.user("setDefReceiveAddr");
            let data = {
                Id: id,
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                $.back();
            });
        },
        init() {
            this.current = $.getLocal("currentAddrId");
            this.getAddrList();
        },
        getAddrList() {
            let url = $.user("receiveAddrList");
            $.np(url).then((res) => {
                let list = [];
                res.Id.forEach((ele, ind) => {
                    let item = {};
                    for (let i in res) {
                        item[i] = res[i][ind];
                    }
                    list.push(item);
                });
                this.addrList = list;
                this.loaded = true;
            });
        },
    },
};
</script>

<style lang="less">
.info {
    background: #fff;
    border-top: 2rpx solid #f0f0f0;
}

.addr {
    padding: 30rpx 20rpx;
    background: #fff;
    border-bottom: 2rpx solid #f0f0f0;
    .current {
        align-self: center;
    }

    .icon {
        position: relative;
        top: 4rpx;

        &.arrow {
            top: 6rpx;
        }
    }

    .edit {
        padding: 0 20rpx;
    }

    .txt {
        height: 100rpx;
        margin-left: 20rpx;

        .tt {
            font-weight: bold;
            div {
                font-size: 32rpx;
            }
            .name {
                width: 180rpx;
            }
            .morendizhi {
                background: #05c160;
                color: #fff;
                border-radius: 10rpx;
                font-size: 20rpx;
                font-weight: normal;
                padding: 4rpx 12rpx;
                margin-left: 20rpx;
            }
        }

        .bb {
            font-size: 28rpx;
            margin-top: 16rpx;
            color: #666;
        }
    }
}

.addWrapHeight {
    height: 150rpx;
}

.addWrap {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30rpx 120rpx;
    button {
        height: 80rpx;
        border-radius: 100rpx;
        background: linear-gradient(to right bottom, #05c160, #05c160);
        color: #fff;
        .icon {
            margin-right: 10rpx;
            position: relative;
            top: 0;
        }
        .wb {
            font-size: 28rpx;
        }
    }
}
</style>
